<template>
  <div>
    <el-form ref="form" :model="form" disabled label-width="120px">
      <el-form-item label="列表封面：">
        <UploadFile :file-list="form.coverImg" />
      </el-form-item>
      <el-form-item label="景区开放时间：">
        <div v-for="(item,dateIndex) in form.timeRules" :key="dateIndex">
          <div class="data-list-box">
            <div class="data-box">
              <el-date-picker
                v-model="item.dateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
            <div v-for="(timeItem,timeIndex) in item.timeList" :key="timeIndex" class="time-list-box clearfix">
              <el-col class="time-item" :span="4">
                <el-select v-model="timeItem.weekValue">
                  <el-option :value="1" label="周一" />
                  <el-option :value="2" label="周二" />
                  <el-option :value="3" label="周三" />
                  <el-option :value="4" label="周四" />
                  <el-option :value="5" label="周五" />
                  <el-option :value="6" label="周六" />
                  <el-option :value="7" label="周日" />
                  <el-option :value="8" label="周一到周五" />
                  <el-option :value="9" label="全部时间" />
                </el-select>
              </el-col>
              <el-col class="time-item" :span="4">
                <el-select v-model="timeItem.dayType1">
                  <el-option :value="1" label="上午" />
                  <el-option :value="2" label="全天" />
                </el-select>
              </el-col>
              <el-col class="time-item" :span="5">
                <el-time-picker
                  v-model="timeItem.amTimeRange"
                  is-range
                  value-format="HH:mm"
                  format="HH:mm"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-col>
              <el-col class="time-item" :span="4">
                <el-select v-model="timeItem.dayType2" :disabled="timeItem.dayType1 === 2">
                  <el-option :value="2" label="下午" />
                </el-select>
              </el-col>
              <el-col class="time-item" :span="5">
                <el-time-picker
                  v-model="timeItem.pmTimeRange"
                  is-range
                  value-format="HH:mm"
                  format="HH:mm"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :disabled="timeItem.dayType1 === 2"
                />
              </el-col>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="是否需要门票：">
        <el-switch v-model="form.isNeed" active-text="是" inactive-text="否" :inactive-value="0" :active-value="1" />
      </el-form-item>
      <el-form-item label="商家相册：">
        <UploadFile :file-list="form.albumImgUrls" />
        <UploadFile :file-list="form.albumVideoUrls" file-type="file" />
      </el-form-item>
      <el-form-item label="简介/攻略：">
        <RichText :value.sync="form.description" disabled />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadFile from '@/components/UploadFile/index.vue'
import RichText from '@/components/RichText/index.vue'
export default {
  name: 'ShopFace',
  components: {
    UploadFile,
    RichText
  },
  props: {
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {}
    }
  },

  watch: {
    formDetail(value) {
      const { coverImg, timeRules, isNeed, albumImgUrls, albumVideoUrls, description } = value
      const dateList = (timeRules || []).map(item => {
        const timeList = item.timeRuleBaseVOS.map(timeItem => {
          let dayType1 = ''
          if (timeItem.type1 === 1) {
            dayType1 = 1
          } else if (timeItem.dayRule === 1) {
            dayType1 = 2
          }
          return {
            amTimeRange: [timeItem.amStartTime || '', timeItem.amEndTime || ''],
            dayType1: dayType1 || '',
            dayType2: timeItem.type2 || '',
            pmTimeRange: [timeItem.pmStartTime || '', timeItem.pmEndTime || ''],
            weekValue: timeItem.weekValue || ''
          }
        })
        return {
          dateRange: [item.startDate || '', item.endDate || ''],
          timeList
        }
      })
      this.form = {
        coverImg,
        timeRules: dateList,
        isNeed,
        albumImgUrls,
        albumVideoUrls,
        description
      }
    }
  },

  created() {
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.data-list-box{
  border: 1px solid #ebeef5;
  margin-bottom: 20px; width: 100%;
  .data-box{
    text-align: left;
    padding: 20px;
    width: 400px;
  }
  .time-list-box{
    text-align: left;
    border-top: 1px solid #ebeef5;
  }
  .time-item{
    border-right: 1px solid #ebeef5;
    padding: 20px;
    &:last-child{
      border-right: none
    }
  }
  .el-range-editor{
    width: 100%;
  }
}

</style>
